<template>
    <div class="box">
        <ul>
            <li>
                <div class="left">
                     <img src="img/bitian@2x.png" alt=""><span>发起人</span>
                </div>
                <div class="right">
                    {{initiator}}
                </div>
            </li>
            <li>
                <div class="left">
                     <img src="img/bitian@2x.png" alt=""><span>隶属校区/部门</span>
                </div>
                <div class="right">
                    {{belongingToCampus}}
                </div>
            </li>
        </ul>
        <div class="title">
            <img src="img/bitian@2x.png" alt=""><span>添加人员信息</span>
        </div>
        <ol>
            <li><div class="left">姓名</div><div class="right"><input type="text" v-model="list.username" placeholder="请输入姓名"></div></li>
            <li><div class="left">手机号</div><div class="right"><input type="number" v-model="list.userPhone" maxlength="11" placeholder="请输入手机号"></div></li>
            <li><div class="left">邮箱</div><div class="right"><input type="text" v-model="list.email" placeholder="请输入邮箱"></div></li>
            <li @click="openSex"><div class="left">性别</div><div class="right"><span>{{list.userSex}}</span><van-icon name="arrow" /></div></li>
            <li @click="openPosition"><div class="left">职位</div><div class="right">{{list.job}}<van-icon name="arrow" /></div></li>
            <li @click="openPart"><div class="left">部门</div><div class="right">{{list.userDepartment}}<van-icon name="arrow" /></div></li>
        </ol>
        <!-- 确定 -->
        <button @click="submit">确定</button>
        <van-popup v-model="sexShow" position="bottom">
            <van-picker
                show-toolbar
                :columns="['男','女']"
                @confirm="sexConfirm"
                @cancel="sexCancel"
                />
        </van-popup>

         <van-popup v-model="partShow" position="bottom">
            <van-picker
                show-toolbar
                :columns="partColumns"
                @confirm="partConfirm"
                @cancel="partCancel"
                />
        </van-popup>

         <van-popup v-model="mentShow" position="bottom">
            <van-picker
                show-toolbar
                :columns="partment"
                @confirm="mentConfirm"
                @cancel="mentShow = false"
                />
        </van-popup>
    </div>
</template>
<script>
export default {
    data() {
        return {
            fileList:[],
            sexShow:false,
             columns: ['杭州', '宁波', '温州', '绍兴', '湖州', '嘉兴', '金华', '衢州'],
             partShow:false,
             mentShow:false,
             partment:[],
             initiator:'',
             belongingToCampus:'',
             list:{
                 username:'',
                 userPhone:'',
                 email:'',
                 userSex:'请选择性别',
                 job:'请选择职位',
                 userDepartment:'请选择部门'
             },
             partColumns:[],
        }
    },
    mounted() {
        (async ()=>{
            let { data } = await this.get('/user/userInfoShow',{userId:localStorage.getItem('id')});
            let job = await this.get('/user/selectJob');
            let partment = await this.get('/user/findAllDep');
            this.partment = partment.data.map(item=>item.areaName);
            this.partColumns = job.data.map(item=>item.adminJob);
            this.initiator = data.userName;
            this.belongingToCampus = data.userDep;
        })()
    },
    methods: {
        openSex(){
            this.sexShow = true;
        },
        openPosition(){
           this.partShow = true;
        },
        openPart(){
            this.mentShow = true;
        },
         emailVerify(email){
            let re = /^[\w.-]+@([0-9a-z][\w-]+\.)+[a-z]{2,3}$/i;
            if(re.test(email)){
               return true 
            }else{
                return false
            }
        },
        selectPart(){
            this.show = true
        },
        sexConfirm(value, index) {
            this.list.userSex = value;
            this.sexShow = false;
        },
        sexCancel() {
            this.sexShow = false
        },
        partConfirm(value) {
            this.list.job = value;
            this.partShow = false;
        },
        partCancel() {
            this.partShow = false;
        },
        mentConfirm(value) {
            this.list.userDepartment = value;
            this.mentShow = false;
        },
        submit(){
            if(!this.emailVerify(this.list.email)){
                this.Toast('邮箱格式不正确')
                return
            }
            if(this.list.userPhone.length != 11){
                this.Toast('手机号格式不正确')
                return
            }
            if(this.list.userSex == '请选择性别'){
                this.Toast('请选择性别')
                return
            }
            if(this.list.job == '请选择职位'){
                this.Toast('请选择职位')
                return
            }
            if(this.list.userDepartment == '请选择部门'){
                this.Toast('请选择部门')
                return
            }
            let obj = {
                ...this.list,
                initiator:this.initiator,
                initiatorId:localStorage.getItem('id'),
                belongingToCampus:this.belongingToCampus,
                isDelete:1
            };
            
            (async ()=>{
            let data = await this.get('/user/regist',obj);
            console.log(data);
            if(data.code == -1){
                this.Toast(data.msg)
                return
            }
            if(data.code == 200){
                this.Toast({
                    type:'success',
                    duration:1000,
                    message:data.msg
                })
                this.$router.back();
            }
        })()
        }
        },
}
</script>
<style lang="scss" scoped>
    .box{
        background:#F7F9FA;
        height: 100%;
    }
    ul{
        li{
            background: white;
            padding: 0.3rem 0.24rem;
            box-sizing: border-box;
            display: flex;
            align-items: center;
            color: #606060;
            font-size: 0.3rem;
            border-top: 0.02rem solid  #F7F9FA;
            justify-content: space-between;
            .rights{
                display: flex;
                align-items: center;
            }
            .left{
                display: flex;
                align-items: center;
                color: #7E7E7E;
                img{
                    width: 0.12rem;
                    height: 0.14rem;
                }
                span{
                    margin-left: 0.1rem;
                }
            }
        }
    }
    button{
        width: 7.02rem;
        height: 0.84rem;
        background: #2E9EFF;
        border: 0.01rem solid #2E9EFF;
        box-shadow: 0.01rem 0.12rem 0.12rem 0.02rem rgba(4, 111, 204, 0.07);
        border-radius: 0.08rem;
        position: fixed;
        bottom: 0.24rem;
        left: 50%;
        transform: translateX(-50%);
        font-size: 0.33rem;
        line-height: 0.84rem;
        text-align: center;
        font-family: PingFang SC;
        font-weight: bold;
        color: #FFFFFF;
    }
    .title{
        padding: 0.3rem 0.2rem;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        font-size: 0.3rem;
        font-family: PingFang SC;
        font-weight: 500;
        color: #343434;
        img{
            width: 0.12rem;
            height: 0.14rem;
        }
         span{
                    margin-left: 0.1rem;
                }
    }
    ol{
        li{
            padding: 0.3rem 0.4rem;
            box-sizing: border-box;
            font-size: 0.3rem;
            justify-content: space-between;
            align-items: center;
            display: flex;
            background: white;
            border-bottom: 0.01rem solid #eee;
            .right{
                display: flex;
                align-items: center;
                input{
                    border: none;
                    text-align: right;
                }
            }
        }
    }
</style>